<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
      <el-form-item>
        <el-button @click="handleQuery">保存</el-button>
        <el-button @click="Cancel">取消</el-button>
        <el-button :disabled="!route.query.id" @click="auditAuthFun">实名审核通过</el-button>
        <el-button :disabled="!route.query.id" @click="writeOffFun">实名审核审核驳回</el-button>
        <el-button :disabled="!route.query.id" @click="medicalRepresentativeactiveFun">协议审核通过</el-button>
        <el-button :disabled="!route.query.id" @click="medicalRepresentativeBhFun">协议审核驳回</el-button>
        <el-button :disabled="!route.query.id" @click="historicalHospitalFun">查看推广医院（历史）</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <div class="form_box_flex">
    <SetUserSelect
      :key="keys"
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
      <el-form ref="queryFormmin" :model="datas" label-width="75px">
        <el-row :gutter="20" align="stretch">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>身份证信息</span>
                </div>
              </template>
              <el-form-item label="身份证号:" 
                prop="idCard" 
                :rules="[
                {
                  required: false,
                  message: '请输入身份证号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入身份证号"
                  v-model="datas.idCard"
                  style="width: 300px"
                />
              </el-form-item>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                 <el-form-item label-width="85px" label="正面:" 
                  prop="photoList[0].url" 
                  :rules="[
                  {
                    required: false,
                    message: '请上传身份证正面',
                    trigger: ['blur'],
                  },
                ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList10"
                  ></image-upload>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label-width="85px" label="反面:" 
                  :rules="[
                  {
                    required: false,
                    message: '请上传身份证反面',
                    trigger: ['blur'],
                  },
                ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList11"
                  ></image-upload>
                </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>银行卡信息</span>
                </div>
              </template>
              <el-form-item label="银行卡号:" 
                label-width="85px"
                prop="bankCardNumber" 
                :rules="[
                {
                  required: false,
                  message: '请输入银行卡号',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入银行卡号"
                  v-model="datas.bankCardNumber"
                  style="width: 300px"
                />
              </el-form-item>
              <el-form-item label="开户行:" 
                label-width="85px"
                prop="bank" 
                :rules="[
                {
                  required: false,
                  message: '请输入开户行',
                  trigger: ['blur'],
                },
              ]">
                <el-input
                  placeholder="请输入开户行"
                  v-model="datas.bank"
                  style="width: 300px"
                />
              </el-form-item>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                  <el-form-item label-width="85px" label="银行卡:" 
                      prop="photoList[4].url" 
                      :rules="[
                      {
                        required: false,
                        message: '请上传银行卡',
                        trigger: ['blur'],
                      },
                    ]">
                    <image-upload
                      :disableds="true"
                      :isShowTip="false"
                      showTipText=""
                      :limit="1"
                      v-model="photoList4"
                    ></image-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                <!-- <el-form-item label-width="85px" label="银行卡反面:" 
                      prop="photoList[5].url" 
                      :rules="[
                      {
                        required: true,
                        message: '请上传银行卡反面',
                        trigger: ['blur'],
                      },
                    ]">
                    <image-upload
                      :isShowTip="false"
                      showTipText=""
                      :limit="1"
                      v-model="datas.photoList[5].url"
                    ></image-upload>
                  </el-form-item> -->
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" align="stretch" style="margin-top: 20px">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>学历信息</span>
                </div>
              </template>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                <el-form-item label-width="85px" label="毕业证:" 
                    prop="photoList[2].url" 
                    :rules="[
                    {
                      required: false,
                      message: '请上传毕业证',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList2"
                  ></image-upload>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label-width="85px" label="学位证:" 
                    prop="photoList[3].url" 
                    :rules="[
                    {
                      required: false,
                      message: '请上传学位证',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList3"
                  ></image-upload>
                </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>经营资质</span>
                </div>
              </template>
              <el-row :gutter="20" align="stretch">
                <el-col :span="12">
                <el-form-item label-width="85px" label="经营资质:" 
                    :rules="[
                    {
                      required: false,
                      message: '请上传经营资质',
                      trigger: ['blur'],
                    },
                  ]">
                  <image-upload
                    :disableds="true"
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="photoList5"
                  ></image-upload>
                </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>协议信息</span>
                </div>
              </template>
              <!-- <el-checkbox v-model="datas.checked2">是否已经签订协议</el-checkbox> -->
              <div v-if="agreementlist.length">
                <div v-for="(item, index) in agreementlist" :key="index" @click="gotoHtmlFun(item)" class="color_b">{{ item.type == 1? '代表协议' : (item.type == 2? '反腐承诺书' : '推广行为准则') }}</div>
              </div>
              <div v-else>
                <div>
                  <span>代表协议：</span>
                  <file-upload
                    :isShowTip="false"
                    showTipText=""
                    :fileType="['pdf','jpg', 'png']"
                    :limit="1"
                    v-model="agreementUrl1"
                  ></file-upload>
                </div>
                <div>
                  <span>反腐承诺书：</span>
                  <file-upload
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="agreementUrl2"
                  ></file-upload>
                </div>
                <div>
                  <span>推广行为准则：</span>
                  <file-upload
                    :isShowTip="false"
                    showTipText=""
                    :limit="1"
                    v-model="agreementUrl3"
                  ></file-upload>
                </div>
              </div>
              <!-- <div class="color_b">推广行为准则</div>
              <div class="color_b">反腐承诺书</div> -->
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog v-model="dialogFormVisible" title="协议">
       <!-- <div v-html="htmlDom"></div>
       <div style="display: flex;align-items: center;">
          <div style="width: 300px;margin: 30px 0;">
            甲方签字：
          </div>
          <div>
            签字时间: 
          </div>
       </div>
       <div style="display: flex;align-items: center;">
          <div  style="display: flex;align-items: center;width: 300px;">
            <div>乙方签字：</div><img style="width: 180px" :src="imgUrldata.mrSignedUrl" alt="">
          </div>
          <div>
            签字时间: 
          </div>
       </div> -->
       <!-- <img :src="" alt=""> -->
    </el-dialog>
    <el-dialog v-model="dialogFormVisiblebu" title="驳回">
        <SetUserSelect
          ref="setUserSelectmin"
          :formData="addorderSelect"
          v-model:queryParams="addpaginationParams"
          :isShowUserBtn="false"
          :buttonIsShow="false"
        ></SetUserSelect>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisiblebu = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisibleFun"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <el-dialog v-model="historicalHospital" title="推广医院（历史）">
        <div>
          <el-tag style="margin: 10px" v-for="(item, index) in hospitalHistoryList" :key="index" class="ml-2" type="info">{{ item.hospitalName }}</el-tag>
        </div>
        <template #footer>
          <span>
            <el-button type="primary" @click="historicalHospitalcomi"
              >关闭</el-button
            >
          </span>
        </template>
      </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
//  import { addMedicalRepresentative, medicalRepresentativeId, eitHmedicalRepresentative, auditAuth  } from "@/api/basicManagement/agencyMana";
 import { addMedicalRepresentative, medicalRepresentativeId, eitHmedicalRepresentative, auditAuth, medicalRepresentativeactive, agreementlistByMr, refuseauth, medicalRepresentativeBh, addAgreement  } from "@/api/basicManagement/medicalRepresentative";
import data from "./data";
const { bill, datas } = data;
datas.value = {
  status: '0',
  setTime: null,
  accountTime: null,
  photoList: [
    {
      type: 1,
      category: 0,
      url: ''
    },
    {
      type: 1,
      category: 1,
      url: ''
    },
    {
      type: 2,
      category: 0,
      url: ''
    },
    {
      type: 3,
      category: 0,
      url: ''
    },
    {
      type: 4,
      category: 0,
      url: ''
    },
    {
      type: 4,
      category: 1,
      url: ''
    },
  ],
}
const agreementUrl1 = ref('')
const agreementUrl2 = ref('')
const agreementUrl3 = ref('')
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const { medical_represent_status } = proxys.useDict("medical_represent_status");
const keys = ref(0)
const route:any = useRoute();
// watch(
//   medical_represent_status,
//   (newV, oldV) => {
//     bill.value[4].selectData = medical_represent_status
//     keys.value = new Date().getTime();
//   }
// );
const photoList5 = ref('') // 经营资质
const photoList10 = ref('') // 身份证 正
const photoList11 = ref('') // 身份 反
const photoList2 = ref('') // 学历证书
const photoList3 = ref('') // 学位证书
const photoList4 = ref('') // 银行信息
const agreementlist = ref([])
const agencyByIdFun = () => {
  medicalRepresentativeId(route.query.id).then((res) => {
    if (res.data.agreementList[0]?.url && res.data.agreementList?.[1]?.url && res.data.agreementList[2]?.url) {
      agreementlist.value = res.data.agreementList
    } else {
      agreementlist.value = []
    }
    
    res.data.status = ''+res.data.status
    let arr = []
    res.data.hospitalList.forEach((val) => {
      arr.push(val.hospitalId)
    })
    res.data.authorizedHospital = arr
    datas.value = res.data

  if(res.data.photoList){
    photoList5.value = res.data.photoList.filter(item => item.type == 5)[0]?.url
    photoList10.value = res.data.photoList.filter(item => item.type == 1&&item.category == 0)[0]?.url
    photoList11.value = res.data.photoList.filter(item => item.type == 1&&item.category == 1)[0]?.url
    photoList2.value = res.data.photoList.filter(item => item.type == 2)[0]?.url
    photoList3.value = res.data.photoList.filter(item => item.type == 3)[0]?.url
    photoList4.value = res.data.photoList.filter(item => item.type == 4)[0]?.url
    }
  })
}
route.query.id && agencyByIdFun()
const handleQuery = function (): void {
  Promise.all([proxys.$refs.setUserSelect.submitForm(),proxys.$refs.queryFormmin.validate()]).then((valid) => {
    let authorizedHospital = [];
    let hospitalList = [];
    bill.value[6].selectData.forEach((item) => {
      if (valid[0].authorizedHospital.includes(item.id)) {
        authorizedHospital.push(item.name)
        hospitalList.push({
          hospitalId: item.id
        })
      }
    });
      // valid[0].birthday = valid[0].birthday + ' 00:00:00';
      (!route.query.id? addMedicalRepresentative : eitHmedicalRepresentative)({
        ...valid[0],
        authorizedHospital: authorizedHospital.join(','),
        hospitalList,
      }).then(() => {
        proxys.$modal.msgSuccess(`${route.query.id? '修改' : '新增'}成功`);
        // Cancel()
      })
  })
};
const Cancel = () => {
  datas.value = {
  setTime: null,
  accountTime: null,
  photoList: [
    {
      type: 1,
      category: 0,
      url: ''
    },
    {
      type: 1,
      category: 1,
      url: ''
    },
    {
      type: 2,
      category: 0,
      url: ''
    },
    {
      type: 3,
      category: 0,
      url: ''
    },
    {
      type: 4,
      category: 0,
      url: ''
    },
    {
      type: 4,
      category: 1,
      url: ''
    },
  ],
};
  const obj = { path: "/basicInformation/medicalRepresentativeList" };
  proxys.$tab.closeOpenPage(obj);
}
const changeFun = function (e: any): void {
  console.log(e);
};




const auditAuthFun = () => {
  auditAuth({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`审核成功`);
    agencyByIdFun()
  })
}

const refuseauthFun = () => {
  
}


const medicalRepresentativeactiveFun = () => {
  medicalRepresentativeactive({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`审核通过`);
    agencyByIdFun()
  })
}
const medicalRepresentativeBhFun = () => {
  medicalRepresentativeBh({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`驳回成功`);
    agencyByIdFun()
  })
}

const listByMr = () => {
  agreementlistByMr().then((res:any) => {
    console.log('fasg24235', res)
    
  })
}
listByMr()

let dialogFormVisible = ref(false)
let htmlDom = ref('')
let imgUrldata = ref({
  mrSignedUrl: '',
  mrSignedTime: ''
})
const gotoHtmlFun = (dom) => {
  // console.log(dom)
  // console.log(datas.value.agreementList)
  // datas.value.agreementList.forEach((val) => {
  //   if (dom.id == val.agreementId) {
  //     imgUrldata.value = val
  //   }
  // })
  // htmlDom.value = dom.content
  // dialogFormVisible.value = true
  // window.open= dom.url
  window.open(dom.url)
}



const addorderSelect = ref([
{
  label: '驳回原因',
  model: 'flowNumber',
  message: '请输入调整原因',
  required: true,
  placeholder: '请输入',
  type: 'input',
  span: 24
},
  
])
const dialogFormVisiblebu = ref(false)
const addpaginationParams = ref({})
const writeOffFun = (item) => {
  // dialogFormVisible.value = true
  refuseauth({
    id: route.query.id
  }).then(() => {
    proxys.$modal.msgSuccess(`驳回成功`);
    agencyByIdFun()
  })
  // addpaginationParams.value.changeIntegral = undefined
  // if (!item.integral || item.integral == 0) {
  //   addorderSelect.value[1].disabled = true
  // } else {
  //   addorderSelect.value[1].disabled = false
  //   addorderSelect.value[1].max = item.integral
  // }
  // keys.value = new Date().getTime()
  // items.value = item

}

const dialogFormVisibleFun = () => {
  proxys.$refs.setUserSelectmin.submitForm().then((val) => {
    
      
    //   getList()
    // })
  })
}
let historicalHospital = ref(false)
const hospitalHistoryList = ref([])
const historicalHospitalFun = () => {
  hospitalHistoryList.value = datas.value.hospitalHistoryList
  console.log('321521', hospitalHistoryList.value)
  historicalHospital.value = true
}
const historicalHospitalcomi = () => {
  historicalHospital.value = false
}


watch(
  [agreementUrl1,agreementUrl2,agreementUrl3],
  (newV, oldV) => {
    if (agreementUrl1.value && agreementUrl2.value && agreementUrl3.value) {
      let agreementList = []
      agreementList.push({
        url: agreementUrl1.value,
        type: 1
      })
      agreementList.push({
        url: agreementUrl2.value,
        type: 2
      })
      agreementList.push({
        url: agreementUrl3.value,
        type: 3
      })
      addAgreement({
        agreementList,
        id: route.query.id,
        load: false
      }).then(() => {
        agencyByIdFun()
      })
    }
    // if(){}
  }
);
</script>
<style scoped>
.pad_10 {
  padding: 10px;
  display: flex;
  height: calc(100vh - 100px);
  flex-direction: column;
  overflow: hidden;
}
.form_box_flex {
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
}
.pad_10 .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
:deep(.el-card) {
  height: 100%;
}
.color_b {
  margin: 20px 0;
  color: rgba(73, 173, 251, 1);
  cursor: pointer;
}
</style>